{% extends 'system_template/public/base_main.html' %}
{% block cite %}模板管理{% endblock %}
{% block head %}
    <style>
        .thumbnail img {
            width: 300px;
            height: 230px;
        }

        .layui-elem-quote {
            margin-bottom: 0;
        }

        .current_theme {
            width: 100%;
            overflow: hidden;
            margin-bottom: 5px;
        }

        .current_theme > div {
            float: left
        }

        .current_theme .left_theme {
            padding: 0 10px
        }

        .right_theme > blockquote {
            height: 200px;
            width: 760px;
        }

        .theme_list .theme {
            float: left;
            padding: 10px;
            margin-right: 5px;
            margin-top: 10px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
            border: 1px solid #dddee1;
            border-color: #e9eaec;
        }

        .theme_list .theme:hover {
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
            border-color: #eee
        }

        .thumbnail_put {
            margin-top: 5px;
            width: 100%;
            overflow: hidden;
        }

        .thumbnail_put .theme_title span {
            line-height: 30px;

        }

        .thumbnail_put .theme_title, .thumbnail_put .theme_put {
            width: 50%;
            float: left;
        }

        .layui-btn + .layui-btn {
            margin-left: 0;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="current_theme">
        <div class="left_theme">
            <div class="thumbnail">
                <img src="{{ url_for('static',filename='web_themes/'+current_theme.info.identifier+'/'+current_theme.info.preview) }}"/>
            </div>
        </div>
        <div class="right_theme">
            <blockquote class="layui-elem-quote">
                当前模板: {{ current_theme.info.theme_name }} - v{{ current_theme.info.version }}<br>
                模板标识: {{ current_theme.info.identifier }} <br>
                作者：{{ current_theme.info.author }} <br>
                作者QQ: {{ current_theme.info.options.qq }}<br>
                作者邮箱: {{ current_theme.info.options.email }}<br>
                模板demo: <a href="{{ current_theme.info.website }}" target="_blank">{{ current_theme.info.website }}</a><br>
                模板简介: {{ current_theme.info.description }}<br>
            </blockquote>
        </div>
    </div>
    <blockquote class="layui-elem-quote" style="background-color:#fff;font-size: 17px;color: #666;">已安装模板 (所有模板) |
        <a class="layui-btn layui-btn-normal" href="javascript:;"
           onclick="layer.open({title:'安装新模板',type: 2,area: ['320px', '200px'],fixed: false, maxmin: false,shadeClose: true,content: '{{ url_for('sys_bp.theme_push') }}'});">
            <i class="layui-icon">&#xe608;</i> 安装模板
        </a>
    </blockquote>
    <div class="theme_list">
        {% for theme in themes %}
            <div class="theme">
                <div class="thumbnail">
                    <img src="{{ url_for('static',filename='web_themes/'+theme.identifier+'/'+theme.preview) }}"/>
                </div>
                <div class="thumbnail_put">
                    <div class="theme_title"><span>{{ theme.theme_name[:10] }}{% if theme.theme_name|length>10 %}...{% endif %} v {{ theme.version[:3] }}</span></div>
                    <div class="theme_put">
                        {% if theme.theme_id==current_theme.info.theme_id %}
                            <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-disabled" href="javascript:;">当前模板</a>
                            <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-disabled" href="javascript:;">卸载模板</a>
                        {% else %}
                            <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" href="javascript:;" data-id="{{ theme.theme_id }}" data-class="apply">
                                应用模板
                            </a>
                            <a class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" href="javascript:;" data-id="{{ theme.theme_id }}" data-class="unload">
                                卸载模板
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
            $('.theme_put>a').on('click', function () {
                var data_class = $(this).attr('data-class');
                var theme_id = $(this).attr('data-id');
                if (data_class === 'apply') { // 应用
                    layer.confirm('确定应用此模板么？', function (index) {
                        $.ajax({
                            type: 'POST',
                            data: {'theme_id': theme_id},
                            dataType: "json",
                            success: function (data) {
                                if (data.status === 0) {
                                    layer.msg('应用模板成功!', {icon: 1, time: 2000});
                                    setTimeout(function () {
                                        window.location.reload();
                                    }, 2000);
                                } else {
                                    layer.msg('应用模板失败: ' + data.msg, {icon: 2, time: 3000});
                                }
                            }, error: function (data) {
                                layer.msg('应用模板失败!', {icon: 7, time: 2000});
                            }
                        });
                    })
                } else if (data_class === 'unload') { // 卸载
                    layer.confirm('确定删除此模板么？', function (index) {
                        $.ajax({
                            type: 'UNLOAD',
                            data: {'theme_id': theme_id},
                            dataType: "json",
                            success: function (data) {
                                if (data.status === 0) {
                                    layer.msg('卸载模板成功!', {icon: 1, time: 2000});
                                    setTimeout(function () {
                                        window.location.reload();
                                    }, 2000);
                                } else {
                                    layer.msg('卸载模板失败: ' + data.msg, {icon: 2, time: 3000});
                                }
                            }, error: function (data) {
                                layer.msg('卸载模板失败!', {icon: 7, time: 2000});
                            }
                        });
                    })
                }
            })
        });
    </script>
{% endblock %}